import 'package:craze/common/index.dart';
import 'package:craze/common/widgets/bullet_point_text.dart';
import 'package:easy_image_viewer/easy_image_viewer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';

class KnowledgeDetailTwoView extends StatelessWidget {
  const KnowledgeDetailTwoView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: _buildAppBar(context),
      body: _buildBody(context),
    );
  }

  PreferredSizeWidget _buildAppBar(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      leading: IconButton(
        icon: Icon(MyIcons.iconBack, color: Colors.white, size: 24.sp),
        onPressed: () => GoRouter.of(context).pop(),
      ),
      title: Text(
        'Knowledge',
        style: TextStyle(
          color: Colors.white,
          fontSize: 22.sp,
          fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
          fontWeight: FontWeight.w400,
        ),
      ),
      centerTitle: true,
    );
  }

  Widget _buildBody(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(MyImages.commonBg),
          fit: BoxFit.cover,
        ),
      ),
      child: SafeArea(
        bottom: false,
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 20.w),
          children: [
            _buildSection(
              title: 'Safety precautions during diving',
              sectionItems: [
                _buildSectionItem(
                  index: '1',
                  title: 'Things to note before diving:',
                  bulletPoints: [
                    'Make sure you do not have a cold, sinusitis, ear disease or respiratory problems that could affect ear pressure equalization during diving.',
                    'If you are undergoing surgery, pregnant or have a chronic illness, please consult a physician before diving.',
                    'Wetsuit and weight belt: adjust the thickness of the wetsuit according to the water surface and water temperature, and configure the weight correctly.',
                    'Confirm with the diving instructor the diving depth, time, route, and the assembly point and emergency response procedures after the dive.',
                    'Carry underwater emergency equipment: such as diving knife, whistle, signal buoy, etc.',
                  ],
                ),
                _buildImageViewer(MyImages.knowledge3),
                _buildSectionItem(
                  index: '2',
                  title: 'Things to note when diving:',
                  bulletPoints: [
                    'The buddy system is an important rule for diving safety. Keep a distance of no more than 2 meters from your diving buddy and check each other\'s situation at all times.',
                    'When diving or ascending, ear pressure equalization (such as pinching the nose and blowing air) should be performed in time every 1 meter or so to avoid ear pressure injuries.',
                    'Stay away from the edge of the abyss, steep cliffs, or areas with strong undercurrents. Pay special attention to potential dangers from reefs or underwater creatures, such as jellyfish, sea urchins, or poisonous fish.',
                    'Always keep an eye on the remaining air pressure in the gas cylinder. It is recommended to ensure that the remaining air pressure is at least 50 bar when returning.',
                  ],
                ),
                _buildSectionItem(
                  index: '3',
                  title: 'Things to note after diving:',
                  bulletPoints: [
                    'If you feel dizziness, nausea, ear pain, joint pain or other abnormal symptoms, you should seek medical attention in time to rule out the possibility of decompression sickness or ear pressure injury.',
                    'Thoroughly rinse diving equipment with clean water, especially breathing regulators, diving suits, masks and oxygen cylinders, and store them properly to ensure safety for next use.',
                  ],
                ),
                _buildImageViewer(MyImages.knowledge4),
              ],
            ),
            SizedBox(height: 100.h),
          ],
        ),
      ),
    );
  }

  Widget _buildSection({
    required String title,
    required List<Widget> sectionItems,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(vertical: 24.h),
          child: Text(
            title,
            style: TextStyle(
              color: Colors.white.withAlpha(230),
              fontSize: 22.sp,
              fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
              fontWeight: FontWeight.w400,
              height: 1.5,
            ),
          ),
        ),
        ...sectionItems,
      ],
    );
  }

  Widget _buildSectionItem({
    required String index,
    required String title,
    required List<String> bulletPoints,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            _buildIndexBadge(index),
            SizedBox(width: 10.w),
            Expanded(
              child: Text(
                title,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.sp,
                  fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ),
          ],
        ),
        SizedBox(height: 16.h),
        ...bulletPoints.map(
          (point) => Padding(
            padding: EdgeInsets.only(left: 32.w, bottom: 16.h),
            child: BulletPointText(text: point, maxWidth: 1.sw - 102.w),
          ),
        ),
        SizedBox(height: 8.h),
      ],
    );
  }

  Widget _buildImageViewer(String imagePath) {
    return Builder(
      builder:
          (context) => Padding(
            padding: EdgeInsets.symmetric(vertical: 16.h),
            child: AspectRatio(
              aspectRatio: 374 / 190,
              child: GestureDetector(
                onTap: () {
                  final imageProvider = AssetImage(imagePath);
                  showImageViewer(
                    context,
                    imageProvider,
                    swipeDismissible: true,
                    doubleTapZoomable: true,
                    immersive: true,
                  );
                },
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.r),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 8,
                        offset: const Offset(0, 4),
                      ),
                    ],
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8.r),
                    child: Image.asset(imagePath, fit: BoxFit.cover),
                  ),
                ),
              ),
            ),
          ),
    );
  }

  Widget _buildIndexBadge(String index) {
    return Container(
      width: 36.w,
      height: 36.w,
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xFF0076FF), Color(0xFF045EC6)],
        ),
        borderRadius: BorderRadius.circular(8.r),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF003068).withOpacity(0.5),
            blurRadius: 4,
            offset: const Offset(2, 2),
          ),
        ],
      ),
      child: Center(
        child: Text(
          index,
          style: TextStyle(
            color: Colors.white,
            fontSize: 18.sp,
            fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    );
  }
}
